<template>
    <div>
        <div class="seach">
            <span class="seachStatus">
                {{$t('creatime')}}
                <el-date-picker :placeholder="$t('plsset')" v-model="creationTime" width="20%" type="daterange" :range-separator="$t('to')" :start-placeholder="$t('startdate')" :end-placeholder="$t('dateclosed')" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="mini"></el-date-picker>
            </span>
            <span class="seachCSC">
                {{$t('versions')}}
                <el-input v-model.trim="appversionForm.version" :placeholder="$t('plsipt')" size="mini"></el-input>
            </span>
            <span class="seachCSC">
                {{$t('systemtyp')}}
                <el-select v-model="appversionForm.appType" :placeholder="$t('plsset')" size="mini">
                    <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                    <el-option :label="$t('iossidepsnversion')" value="PSNIOS"></el-option>
                    <el-option :label="$t('androidpsnled')" value="PSNANDROID"></el-option>
                    <el-option :label="$t('iossidemerversion')" value="MERIOS"></el-option>
                    <el-option :label="$t('androidmeredition')" value="MERANDROID"></el-option>
                </el-select>
            </span>
            <el-button type="primary" @click="seachVerList" v-preventReClick>{{$t('qury')}}</el-button>
            <el-button type="warning" @click="showAddVer" v-preventReClick>{{$t('add')}}</el-button>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="appVerList">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="version" :label="$t('versionnum')" min-width="127">
                </el-table-column>
                <el-table-column prop="appType" :label="$t('subtsys')" min-width="177">
                </el-table-column>
                <el-table-column prop="updateUrl" :label="$t('refreshaddress')" min-width="246">
                </el-table-column>
                <el-table-column prop="status" :label="$t('sta')" min-width="79">
                </el-table-column>
                <el-table-column prop="isMust" :label="$t('whetoforceupdate')" min-width="169">
                </el-table-column>
                <el-table-column prop="sysCreateTime" :label="$t('creatime')" min-width="167">
                </el-table-column>
                <el-table-column prop="address" :label="$t('opratn')" width="90" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="showEditAppVer(scope.row)">{{$t('mdfy')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="appversionForm.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="appversionForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <!-- Add the box -->
        <el-dialog :title="$t('add')" :visible.sync="addDialogVisible" width="30%" @close="addDialogVisibleClosed(addVersionForm)" center :close-on-click-modal="isOk" :modal-append-to-body="false">
            <el-form :ref="addVersionForm" :rules="addVersionRules" :model="addVersionForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('system')" prop="appType">
                    <el-select v-model="addVersionForm.appType" :placeholder="$t('plsset')" class="sellong">
                    <el-option :label="$t('iossidepsnversion')" value="PSNIOS"></el-option>
                    <el-option :label="$t('androidpsnled')" value="PSNANDROID"></el-option>
                    <el-option :label="$t('iossidemerversion')" value="MERIOS"></el-option>
                    <el-option :label="$t('androidmeredition')" value="MERANDROID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('ismust')" prop="isMust">
                    <el-select v-model="addVersionForm.isMust" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('yes')" :value="1"></el-option>
                        <el-option :label="$t('no')" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="addVersionForm.isMust === 1" :label="$t('forverupdate')" prop="needMustVersion">
                    <span v-if="addVersionForm.appType === ''">{{$t('pleselthesysst')}}</span>
                    <el-select v-if="addVersionForm.appType === 'MERANDROID'" v-model="addVersionForm.needMustVersion" :placeholder="$t('plsset')" class="sellong">
                        <el-option v-for="(item, i) in merAnd" :key="i" :label="item" :value="item"></el-option>
                    </el-select>
                    <el-select v-if="addVersionForm.appType === 'PSNANDROID'" v-model="addVersionForm.needMustVersion" :placeholder="$t('plsset')" class="sellong">
                        <el-option v-for="(item, i) in psnAnd" :key="i" :label="item" :value="item"></el-option>
                    </el-select>
                    <el-select v-if="addVersionForm.appType === 'MERIOS'" v-model="addVersionForm.needMustVersion" :placeholder="$t('plsset')" class="sellong">
                        <el-option v-for="(item, i) in merIos" :key="i" :label="item" :value="item"></el-option>
                    </el-select>
                    <el-select v-if="addVersionForm.appType === 'PSNIOS'" v-model="addVersionForm.needMustVersion" :placeholder="$t('plsset')" class="sellong">
                        <el-option v-for="(item, i) in psnIos" :key="i" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('versions')" prop="version">
                    <el-input v-model.trim="addVersionForm.version"></el-input>
                </el-form-item>
                <el-form-item :label="$t('sta')" prop="status">
                    <el-select v-model="addVersionForm.status" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('vlid')" value="VALID"></el-option>
                        <el-option :label="$t('invlid')" value="INVALID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('url')" prop="updateUrl">
                    <el-input v-model.trim="addVersionForm.updateUrl"></el-input>
                </el-form-item>
                <el-form-item :label="$t('contents')" prop="updateInfo">
                    <el-input type="textarea" v-model="addVersionForm.updateInfo"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addVersion(addVersionForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="addDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
        <!-- modification the box -->
        <el-dialog :title="$t('mdfy')" :visible.sync="editDialogVisible" width="30%" @close="editDialogVisibleClosed(editVersionForm)" center :close-on-click-modal="isOk" :modal-append-to-body="false">
            <el-form :ref="editVersionForm" :rules="editVersionRules" :model="editVersionForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('system')" prop="appType">
                    <el-select v-model="editVersionForm.appType" :placeholder="$t('plsset')" class="sellong">
                    <el-option :label="$t('iossidepsnversion')" value="PSNIOS"></el-option>
                    <el-option :label="$t('androidpsnled')" value="PSNANDROID"></el-option>
                    <el-option :label="$t('iossidemerversion')" value="MERIOS"></el-option>
                    <el-option :label="$t('androidmeredition')" value="MERANDROID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('ismust')" prop="isMust">
                    <el-select v-model="editVersionForm.isMust" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('yes')" :value="1"></el-option>
                        <el-option :label="$t('no')" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="editVersionForm.isMust === 1" :label="$t('forverupdate')" prop="needMustVersion">
                    <span v-if="editVersionForm.appType === ''">{{$t('pleselthesysst')}}</span>
                    <el-select v-if="editVersionForm.appType === $t('androidmeredition')" v-model="editVersionForm.needMustVersion" :placeholder="$t('plsset')" class="sellong">
                        <el-option v-for="(item, i) in merAnd" :key="i" :label="item" :value="item"></el-option>
                    </el-select>
                    <el-select v-if="editVersionForm.appType === $t('androidpsnled')" v-model="editVersionForm.needMustVersion" :placeholder="$t('plsset')" class="sellong">
                        <el-option v-for="(item, i) in psnAnd" :key="i" :label="item" :value="item"></el-option>
                    </el-select>
                    <el-select v-if="editVersionForm.appType === $t('iossidemerversion')" v-model="editVersionForm.needMustVersion" :placeholder="$t('plsset')" class="sellong">
                        <el-option v-for="(item, i) in merIos" :key="i" :label="item" :value="item"></el-option>
                    </el-select>
                    <el-select v-if="editVersionForm.appType === $t('iossidepsnversion')" v-model="editVersionForm.needMustVersion" :placeholder="$t('plsset')" class="sellong">
                        <el-option v-for="(item, i) in psnIos" :key="i" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('versions')" prop="version">
                    <el-input v-model.trim="editVersionForm.version" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('sta')" prop="status">
                    <el-select v-model="editVersionForm.status" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('vlid')" value="VALID"></el-option>
                        <el-option :label="$t('invlid')" value="INVALID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('url')" prop="updateUrl">
                    <el-input v-model.trim="editVersionForm.updateUrl"></el-input>
                </el-form-item>
                <el-form-item :label="$t('contents')" prop="updateInfo">
                    <el-input type="textarea" v-model="editVersionForm.updateInfo"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editVersion(editVersionForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="editDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getappversionpage,
    addappversion,
    updateappversion
} from '@/libs/reqlist.js'
export default {
    data () {
        return {
            isOk: false,
            total: 0,
            creationTime: null,
            modificationTime: null,
            appversionForm: {
                appType: null,
                orderParamIdx: 0,
                orderType: 0,
                pageNum: 1,
                pageSize: 10,
                startTime: null,
                endTime: null,
                sysModifiedTime: null,
                version: null
            },
            appVerList: [],
            addVersionForm: {
                appType: '',
                id: 0,
                isMust: null,
                needMustVersion: '',
                status: '',
                updateInfo: '',
                updateUrl: '',
                version: ''
            },
            addDialogVisible: false,
            addVersionRules: {
                appType: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                isMust: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                version: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                status: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                updateUrl: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ]
            },
            editVersionForm: {
                appType: '',
                id: 0,
                isMust: null,
                needMustVersion: '',
                status: '',
                updateInfo: '',
                updateUrl: '',
                version: ''
            },
            editDialogVisible: false,
            editVersionRules: {
                appType: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                isMust: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                version: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                status: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                updateUrl: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ]
            },
            merAnd: [],
            psnAnd: [],
            merIos: [],
            psnIos: []
        }
    },
    methods: {
        getAppVersionList () {
            getappversionpage(JSON.stringify(this.appversionForm)).then(res => {
                if (res.data.code === '000000') {
                    this.merAnd = []
                    this.psnAnd = []
                    this.merIos = []
                    this.psnIos = []
                    this.total = res.data.data.total - 0
                    for (let i = 0; i <= res.data.data.list.length - 1; i++) {
                        let j = res.data.data.list[i]
                        if (j.appType === 'PSNIOS') {
                            this.psnIos.push(j.version)
                            j.appType = this.$t('iossidepsnversion')
                        }
                        if (j.appType === 'PSNANDROID') {
                            this.psnAnd.push(j.version)
                            j.appType = this.$t('androidpsnled')
                        }
                        if (j.appType === 'MERIOS') {
                            this.merIos.push(j.version)
                            j.appType = this.$t('iossidemerversion')
                        }
                        if (j.appType === 'MERANDROID') {
                            this.merAnd.push(j.version)
                            j.appType = this.$t('androidmeredition')
                        }
                        if (j.status === 'VALID') j.status = this.$t('vlid')
                        if (j.status === 'INVALID') j.status = this.$t('invlid')
                        if (j.isMust === 1) j.isMust = this.$t('yes')
                        if (j.isMust === 0) j.isMust = this.$t('no')
                    }
                    this.appVerList = res.data.data.list
                }
            })
        },
        seachVerList () {
            if (this.creationTime != null) {
                this.appversionForm.startTime = this.creationTime[0]
                this.appversionForm.endTime = this.creationTime[1]
            }
            if (!this.creationTime) {
                this.appversionForm.startTime = null
                this.appversionForm.endTime = null
            }
            if (this.appversionForm.version === '') this.appversionForm.version = null
            this.appversionForm.pageNum = 1
            this.getAppVersionList()
        },
        showAddVer () {
            this.addDialogVisible = true
        },
        // 监听页面展示数据条数变化
        handleSizeChange (newSize) {
            this.appversionForm.pageSize = newSize
            this.getAppVersionList()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.appversionForm.pageNum = newNum
            this.getAppVersionList()
        },
        addDialogVisibleClosed(form) {
            this.$refs[form].resetFields()
        },
        addVersion(form) {
            this.$refs[form].validate((valid) => {
                if (!valid) {
                    return false
                }
                this.addVersionForm.updateInfo = this.addVersionForm.updateInfo.trim()
                addappversion(JSON.stringify(this.addVersionForm)).then(res => {
                    if (res.data.code === '000000') {
                        this.$message({
                            message: this.$t('funaddsuc'),
                            type: 'success'
                        })
                        this.addDialogVisible = false
                        this.getAppVersionList()
                    }
                })
            })
        },
        showEditAppVer (data) {
            this.editVersionForm.appType = data.appType
            this.editVersionForm.id = data.id
            this.editVersionForm.isMust = data.isMust
            this.editVersionForm.status = data.status
            this.editVersionForm.updateUrl = data.updateUrl
            this.editVersionForm.version = data.version
            if (data.needMustVersion) this.editVersionForm.needMustVersion = data.needMustVersion
            if (data.updateInfo) this.editVersionForm.updateInfo = data.updateInfo
            this.editDialogVisible = true
        },
        editVersion (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) {
                    return false
                }
                if (this.editVersionForm.appType === this.$t('iossidepsnversion')) this.editVersionForm.appType = 'PSNIOS'
                if (this.editVersionForm.appType === this.$t('androidpsnled')) this.editVersionForm.appType = 'PSNANDROID'
                if (this.editVersionForm.appType === this.$t('iossidemerversion')) this.editVersionForm.appType = 'MERIOS'
                if (this.editVersionForm.appType === this.$t('androidmeredition')) this.editVersionForm.appType = 'MERANDROID'
                if (this.editVersionForm.status === this.$t('vlid')) this.editVersionForm.status = 'VALID'
                if (this.editVersionForm.status === this.$t('invlid')) this.editVersionForm.status = 'INVALID'
                if (this.editVersionForm.isMust === this.$t('yes')) this.editVersionForm.isMust = 1
                if (this.editVersionForm.isMust === this.$t('no')) this.editVersionForm.isMust = 0
                this.editVersionForm.updateInfo = this.editVersionForm.updateInfo.trim()
                updateappversion(JSON.stringify(this.editVersionForm)).then(res => {
                    if (res.data.code === '000000') {
                        this.$message({
                            message: this.$t('modfunsuc'),
                            type: 'success'
                        })
                        this.editDialogVisible = false
                        this.getAppVersionList()
                    }
                })
            })
        },
        editDialogVisibleClosed(form) {
            this.$refs[form].resetFields()
        }
    },
    mounted () {
        this.getAppVersionList()
    }
}
</script>

<style lang="less" scoped>
@import './appversion.less';
</style>
